<template>
	<div class="home-container">
		<el-row :gutter="3">
			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="15">
				<el-row :gutter="6" style="margin:0px">
					<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
						<el-card class="grid-content">
							<Pie title="集群容量" innerDiameter="0%" :data="state.clusterData" labelUnit="%" />
						</el-card>
					</el-col>
					<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
						<el-card class="grid-content">
							<Pie title="节点状态" :data="state.nodeData" />
						</el-card>
					</el-col>
					<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
						<el-card class="grid-content">
							<Pie title="OSD健康状态" :data="state.osdData" />
						</el-card>
					</el-col>
				</el-row>

				<el-row>
					<el-col style="padding: 0px 3px">
						<el-card class="grid-content">
							<div class="grid-hearder">节点信息</div>
							<el-table :data="state.tableData" border height="318px">
								<el-table-column prop="nodeName" label="节点名称"  min-width="130"/>
								<el-table-column prop="ipAddress" label="IP地址"  min-width="130"/>
								<el-table-column prop="status" label="节点状态" width="130">
									<template #default="{row}">
										<el-tag :type="nodeStatusOptions.find(item=>item.value===row.status)?.type">
											{{ nodeStatusOptions.find(item=>item.value===row.status)?.label }}
										</el-tag>
									</template>
								</el-table-column>
								<el-table-column prop="memoryUsage" label="内存使用量(%)" width="130"/>
								<el-table-column prop="cpuUsage" label="CPU使用量(%)" width="130"/>
							</el-table>
						</el-card>
					</el-col>
				</el-row>
			</el-col>

			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="9">
				<el-card class="grid-content" style="height: 100px;">
					<span class="grid-title">集群状态</span>
					<div class="grid-text" :title="state.clusterStatusDetail">
						<span>{{ state.clusterStatus }}</span>
					</div>
				</el-card>

				<el-card class="grid-content" style="height: 327px;">
					<Line title="集群OPS" :data="state.opsData" :x-interval-show="2" :turnOnInsideDataZoom="true" :y-unit="'次/秒'"/>
				</el-card>
				<el-card class="grid-content" style="height: 327px;">
					<Line title="集群BPS" :data="state.bpsData" :x-interval-show="2" :turnOnInsideDataZoom="true" :y-unit="'B/s'"/>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script lang="ts" setup>
import { defineAsyncComponent, onMounted, onUnmounted, reactive, ref } from 'vue';
import { useHomeApi } from '/@/api/home';
import { LineChartData } from '/@/types';
import { lineTimeHandle } from '/@/utils/other';
import { opsMap } from '/@/utils/const';

interface DataState{
	clusterData:any[],
	nodeData:any[],
	osdData:any[],
	tableData:any[],
	clusterStatus:string,
	clusterStatusDetail:string,
	opsData:LineChartData,
	bpsData:LineChartData
}
const state = reactive<DataState>({
	clusterData: [],
	nodeData: [],
	osdData: [],
	tableData: [],
	clusterStatus: '',
	clusterStatusDetail: '',
	opsData: {
		seriesNames: [],
		seriesData: []
	},
	bpsData: {
		seriesNames: [],
		seriesData: []
	}
});

const Pie = defineAsyncComponent(() => import('/@/components/echarts/pie.vue'));
const Line = defineAsyncComponent(() => import('/@/components/echarts/line.vue'));

const nodeStatusOptions = [
	{ label: '未知', value: undefined },
	{ label: '离线', value: 0, type: 'danger' },
	{ label: '在线', value: 1, type: 'success' },
];

// get charts data
const fetchData = () => {
	useHomeApi().getOverview().then((res:any) => {
		const cluster = res.data.capacityUsage;
		const node = res.data.node;
		const onlineNode = res.data.node.filter((item:any) => item.status === 1).length;
		const offlineNode = res.data.node.length - onlineNode;
		const osd = res.data.osd;
		state.clusterData = cluster !== null ? [
			{
				value: 100 - cluster,
				name: '空闲',
				itemStyle: {
					color: '#73C0DE'
				}
			},
			{
				value: cluster,
				name: '占用',
				itemStyle: {
					color: '#5470C6'
				}
			},
		] : [null];
		state.nodeData = [
			{
				value: onlineNode || 0,
				name: '在线',
				itemStyle: {
					color: '#91CC75'
				}
			},
			{
				value: offlineNode || 0,
				name: '离线',
				itemStyle: {
					color: '#EE6666'
				},
				tooltipData: node.offline
			},
		];
		state.osdData = [
			{
				value: osd.osdNormalNum,
				name: '正常',
				itemStyle: {
					color: '#91CC75'
				}
			},
			{
				value: Number(osd.osdNum) - Number(osd.osdNormalNum),
				name: '异常',
				itemStyle: {
					color: '#EE6666'
				}
			},
		];
		state.tableData = res.data.node;
		state.clusterStatus = res.data.clusterStatus;
		state.clusterStatusDetail = res.data.clusterStatusDetail;

		state.opsData = lineTimeHandle(res.data.ops, opsMap);
		state.bpsData = lineTimeHandle(res.data.bps, opsMap);
	});
};

const timer = ref();
onMounted(() => {
	fetchData();
	timer.value = setInterval(() => {
		fetchData();
	}, 3600 * 1000);
});

onUnmounted(() => {
	clearInterval(timer.value);
});
</script>

<style scoped lang="scss">
.home-container{
	padding: 0px 3px;
}
.grid-content {
	position: relative;
  border-radius: 4px;
  height: 380px;
	margin-bottom: 6px;
	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.12);
	.grid-hearder{
		font-size: 18px;
		font-weight: bolder;
		margin-bottom: 10px;
	}
	.grid-title{
		position: absolute;
		font-size: 18px;
		font-weight: bolder;
	}
	.grid-text{
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 18px;
		cursor: default;
	}
}

:deep(.el-card){
	.el-card__body{
			height: 100%;
			padding: 10px;
	}
}

.flex-column{
	display: flex;
	flex-direction: column;
}
</style>